<template>
   <div class="about">
      <el-table
            :data="showList"
            border
            style="width: 100%">
         <el-table-column
               prop="uid"
               label="用户id">
         </el-table-column>
         <el-table-column
               prop="nickname"
               label="姓名">
         </el-table-column>
         <el-table-column
               prop="mobile"
               label="手机号">
         </el-table-column>
         <el-table-column
               prop="status"
               label="状态">
         </el-table-column>
         <el-table-column
               prop="avatar"
               label="头像">
            <template slot-scope="prop">
               <img :src="prop.row.avatar"/>
            </template>
         </el-table-column>
         <el-table-column
               prop="date"
               label="日期">
         </el-table-column>
         <el-table-column
               label="操作"
               width="120px">
            <template>
               <el-button icon="el-icon-search" size="mini"></el-button>
               <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            </template>
         </el-table-column>
      </el-table>
      <el-pagination
            background
            layout="prev, pager, next"
            :total="userList.length"
            :page-size="5"
            @next-click="onClickNext"
            @prev-click="onClickPre"
      >
      </el-pagination>
   </div>
</template>

<script>
   import axios from "axios"

   export default {
      data() {
         return {
            userList: [],
            showList: [],
            startIndex: 0,
            endIndex: 5,
            offset: 5
         }
      },
      methods: {
         onClickNext() {
            this.startIndex += this.offset;
            this.endIndex += this.offset;
            if (this.endIndex > this.userList.length) {
               this.endIndex = this.userList.length;
            }
            this.showList = [];
            for (let index = this.startIndex; index < this.endIndex; index++) {
               this.showList.push(this.userList[index])
            }
         },
         onClickPre() {
            this.startIndex -= this.offset;
            if (this.startIndex < 0) {
               this.startIndex = 0;
            }

            if (this.endIndex === this.userList.length) {
               if (this.userList.length % 5 === 0) {
                  this.endIndex -= this.offset
               } else {
                  this.endIndex -= (this.userList.length % 5)
               }
            } else {
               this.endIndex -= this.offset
            }
            this.showList = [];
            for (let index = this.startIndex; index < this.endIndex; index++) {
               this.showList.push(this.userList[index])
            }

         }
      },
      mounted() {
         axios.get("http://localhost:8080/list.json").then((res) => {
            console.log(res)
            this.userList = res.data;
            for (let index = this.startIndex; index < this.endIndex; index++) {
               this.showList.push(this.userList[index])
            }
         })
      }
   }
</script>

<style>
   .about {
      width: 100%;
   }

   img {
      width: 40px;
      height: 40px;
   }
</style>